﻿

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="~/Content/Css/plugins/iCheck/custom.css" rel="stylesheet">
    <style>
        .ibox {
            margin-bottom: 0px;
        }

        .inp {
            width: 177px;
            padding: 2px 4px;
            display: inline;
        }

        .lab {
            margin-bottom: 5px;
            font-weight: 700;
            cursor: default;
            width: 60px;
            text-align: center;
        }

        .sel {
            width: 100px;
            padding: 1px 4px;
            display: inline;
            font-size: 12px;
        }

        .sel-min {
            width: 82.5px;
            padding: 1px 4px;
            display: inline;
            font-size: 12px;
        }

        .mybtn-group {
            margin-top: -4px;
        }

        .displayNone {
            display: none;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>销售人员统计</h5>
            </div>

            <div class="ibox-content" style="padding-bottom: 20px;display">
                <div class="row row-lg">

                    <div class="col-sm-12">
                        <form id="mainForm">

                            <input id="repeatPhone" name="repeatPhone" type="hidden" value="false" />
                            <div id="toolbar">

                                <label class="lab">开始时间</label>
                                <input type="text" class="form-control inp" style="width:99px;" id="beginDate" name="beginDate" readonly="readonly" value="2017-1-01">
                                <label class="lab">结束时间</label>
                                <input type="text" class="form-control inp" style="width:99px;" id="endDate" name="endDate" readonly="readonly" value="2018-10-01">

                                <div class="btn-group mybtn-group" style="padding-top:5px;">
                                    <button class="btn btn-white btn-xs" type="submit">查询</button>
                                    <button class="btn btn-primary btn-xs" type="reset" onclick="$('#buildID').val(0);" id="setBtn">清空</button>

                                    <button class="btn btn-primary btn-xs" type="button" id="dateSel01">近3天</button>
                                    <button class="btn btn-primary btn-xs" type="button" id="dateSel02">近7天</button>
                                    <button class="btn btn-primary btn-xs" type="button" id="dateSel03">本月</button>
                                    <button class="btn btn-primary btn-xs" type="button" id="dateSel04">上个月</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 displayNone" style="padding:15px 15px 15px 15px">

                    </div>
                    <div class="col-sm-12">
                        <table id="table"></table>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="~/Scripts/common.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
    <script src="~/Scripts/plugins/layer/laydate/laydate.js"></script>

    <!-- 日期脚本 -->
    <script src="~/Scripts/TimeObjectUtil.js"></script>
    <script src="~/Scripts/loginmodel.js"></script>

    <!-- 自定义脚本 -->
    <script>


        laydate({
            elem: '#beginDate',
            format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
            festival: true, //显示节日
            max: laydate.now(), //设定最小日期为当前日期
            min: '2010-01-01 00:00:00', //最大日期
            choose: function (datas) { //选择日期完毕的回调
                //alert('得到：' + datas);
            }
        });

        laydate({
            elem: '#endDate',
            start: laydate.now(),
            format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
            festival: true, //显示节日
            max: laydate.now(), //设定最小日期为当前日期
            min: '2010-01-01 00:00:00', //最大日期
            choose: function (datas) { //选择日期完毕的回调
                //alert('得到：' + datas);
            }
        });

        function selectDate(day) {
            var mydate = new Date();
            var endDate = "" + mydate.getFullYear() + "-";
            endDate += (mydate.getMonth() + 1) + "-";
            endDate += mydate.getDate();
            $("#endDate").val(endDate);

            if (day == -1) {
                mydate.setYear(mydate.getFullYear() - 20);
            } else {
                mydate.setDate(mydate.getDate() - day);
            }

            var beginDate = "" + mydate.getFullYear() + "-";
            beginDate += (mydate.getMonth() + 1) + "-";
            beginDate += mydate.getDate();
            $("#beginDate").val(beginDate);
        }

        var $table = $("#table");

        $("#mainForm").submit(function () {
            $table.bootstrapTable('refresh');
            return false;
        });

        $(function () {

            //1.初始化Table

            var table_columns = [
                {
                    title: "行号",
                    width: 60,
                    align: "center",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }
                 , {
                     field: 'staffName',
                     title: '报备人员',
                     align: 'center'
                 }
                , {
                    field: 'number',
                    title: '报备数量',
                    align: 'center'
                }
            ];

            var orderBy = "";
            var table_queryParams = function (params) {
                var data = {};
                if (parent.CustomerSource_Index_data != undefined) {
                    data = parent.CustomerSource_Index_data;
                } else {
                    data = $("#mainForm").formToJson(false);
                }
                parent.CustomerSource_Index_data = undefined;
                data.pageIndex = (params.offset / params.limit) + 1;
                data.pageSize = params.limit;
                //data.orderBy = this.sortName;
                //data.orderByType = this.sortOrder;
                return data;
            };

            $table.initTable("/NewHouse/BuildingStatistics/NewHouse4ReportIndexAsync", table_columns, 180, table_queryParams);

        });

        //刷新表格数据
        var refreshTable = function () {
            $table.bootstrapTable('refresh');
        }

        //近3天
        $('#dateSel01').click(function () {
            $('#setBtn').click();
            $('#beginDate').val(laydate.now(-2));
            $('#endDate').val(laydate.now(0));
            $table.bootstrapTable('refresh');
        });
        //近7天
        $('#dateSel02').click(function () {
            $('#setBtn').click();
            $('#beginDate').val(laydate.now(-6));
            $('#endDate').val(laydate.now(0));
            $table.bootstrapTable('refresh');
        });
        //本月
        $('#dateSel03').click(function () {
            $('#setBtn').click();
            $("#beginDate").val(TimeObjectUtil.getMonthDateTime(0).startTime);
            $("#endDate").val(TimeObjectUtil.getMonthDateTime(0).endTime);
            $table.bootstrapTable('refresh');
        });
        //上个月
        $('#dateSel04').click(function () {
            $('#setBtn').click();
            $("#beginDate").val(TimeObjectUtil.getMonthDateTime(-1).startTime);
            $("#endDate").val(TimeObjectUtil.getMonthDateTime(-1).endTime);
            $table.bootstrapTable('refresh');
        });

        //自定义列事件
        window.operateEvents = {

        };


    </script>
</body>
</html>
